<template>
  <div class="app-container">
    <!-- 操作栏 -->
    <div class="buttons">
      <el-button type="primary" icon="el-icon-plus" @click="add"
        >新增</el-button
      >
    </div>
    <div class="mod-result-table">
      <HTable
        ref="table"
        :tableData="tableData"
        :columnConfigs="columnConfigs"
        @selection-change="handleSelectionChange"
        :selectable="false"
        orderable
        v-loading="loading"
        :pages="pagination"
        @page-change="handlePageChange"
        @size-change="handleSizeChange"
      >
        <template slot-scope="{ row }">
          <template v-if="row.name == 'sex'">
            {{ getSexlabel(row.row.sex) }}
          </template>
          <template v-if="row.name == 'bornDate'">
            {{ row.row.bornDateStr && row.row.bornDateStr.slice(0, 10) }}
          </template>

          <template v-else-if="row.name == 'action'">
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
              @click="edit(row.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              size="small"
              @click="handleDelete(row.row)"
              >删除</el-button
            >
          </template>
        </template>
      </HTable>
    </div>
    <div class="vpnform">
      <el-dialog
        :title="editFlag ? '编辑资源' : '新增资源'"
        class="addDialog100"
        :visible.sync="dialogVisible1"
        :before-close="handleClose"
        :close-on-click-modal="false"
        width="35%"
      >
        <el-form
          ref="addform"
          :model="vpnform"
          :rules="rulesVpnform"
          label-width="90px"
        >
          <el-form-item label="资源名称:" prop="userCode">
            <el-input
              v-model="vpnform.userCode"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="资源IP:" prop="mobilePhone">
            <el-input
              v-model="vpnform.mobilePhone"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="资源端口:" prop="mobilePhone">
            <el-input
              v-model="vpnform.mobilePhone"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="创建:" prop="bornDate">
            <el-date-picker
              v-model="vpnform.bornDate"
              value-format="yyyy-MM-dd"
              :clearable="false"
              type="date"
              placeholder="请选择日期"
            >
            </el-date-picker>
          </el-form-item> -->
         
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="submitaddForm('addform')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import table from "@/mixins/commontable";
import { columnConfigs } from "./columnConfigs.js";
import { getList, addList, editList, delCurRow } from "@/api/yybl/user.js";
const sexMap = {
  1: "男",
  2: "女",
};
export default {
  components: {},
  mixins: [table], //表格的混入，主要包括表格上通用的方法和数据，比如查询，重置，分页这些功能
  props: {},
  data() {
    const validatePhoneNumber = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      }
      const phoneNumber = new RegExp(
        "^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$"
      );
      if (phoneNumber.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的手机号"));
      }
    };
    return {
      columnConfigs,
      dialogVisible1: false,
      editFlag: false,
      vpnform: {},
      rulesVpnform: {
        mobilePhone: {
          // required: true,
          // validator: validatePhoneNumber,
          // trigger: "blur",
        },
      },
      computers: [],
      vpntypes: [],
      curRow: {},
      accountOptions: [
        {
          value: "user-hz",
          label: "user-hz",
        },
        {
          value: "user-qs",
          label: "user-qs",
        },
        {
          value: "user-cb",
          label: "user-cb",
        },
        {
          value: "user-yl",
          label: "user-yl",
        },
        {
          value: "user-dl",
          label: "user-dl",
        },
      ],
    };
  },
  watch: {},
  computed: {},
  methods: {
    add() {
      this.editFlag = false;
      this.$nextTick(() => {
        this.dialogVisible1 = true;
        this.$refs?.addform?.clearValidate();
      });
      this.vpnform = {
        userCode: "",
        mobilePhone: "",
        sex: "",
        bornDate: "",
      };
    },
    edit(row) {
      this.editFlag = true;
      this.dialogVisible1 = true;
      this.curRow = row;
      const { userCode, mobilePhone, sex, bornDate } = row;
      this.vpnform = {
        userCode,
        mobilePhone,
        sex: sex + "",
        bornDate,
      };
    },
    async handleDelete(row) {
      this.$confirm("此操作将删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let ids;
          if (row) ids = row.userId;
          const res = await delCurRow({
            ids: ids,
          });
          if (res.rescode == "200") {
            this.$message.success("删除成功");
            this.refresh();
          } else this.$message.error(res.msg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitaddForm(val) {
      console.log(val);
      this.$refs["addform"].validate((val) => {
        if (val) {
          console.log("通过校验");
          const { userCode, mobilePhone, sex, bornDate } = this.vpnform;
          let params = {
            userCode,
            mobilePhone,
            sex,
            bornDate,
          };
          // params.userId = null;
          // params.sharedkey = encode(form.sharedkey);
          if (this.editFlag) {
            params.userId = this.curRow.userId;
            editList(params)
              .then((res) => {
                if (res.rescode == 200) {
                  this.dialogVisible1 = false;
                  this.$message.success("编辑成功");
                  this.refresh();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            // 调用新增接口
            addList(params)
              .then((res) => {
                if ((res.rescode = 200)) {
                  this.dialogVisible1 = false;
                  this.$message.success("新增成功");
                  this.refresh();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        } else {
          console.log("校验失败");
        }
      });
    },
    handleClose() {
      this.dialogVisible1 = false;
    },
    handleSelectionChange() {},
    getSexlabel(sex) {
      return sexMap[sex];
    },
    getparams() {
      // const { inip, outip, status, computer, syncflag, correlateRegion } =
      //   this.form;
      let params = {
        // nasip: inip || null,
        // netIp: outip || null,
        // status: status + "" || null,
        // tcr: computer || null,
        // syncFlag: syncflag + "" || null,
        // cityId: correlateRegion + "" || null,
      };
      return params;
    },
    // refresh() {
    //   let params = this.getparams();
    //   this.getlists(getList, params);
    // },
    refresh() {
      this.tableData = [
        {
          resourceName: "1号服务器",
          ip: "192.168.2.36",
          time: "2023-01-02",
          port:'7999',
          user: "admin",
        },
        {
          resourceName: "网络密码机",
          ip: "192.168.4.177",
          time: "2023-02-02",
          port:'8909',
          user: "admin123",
        },
      ];
    },
  },
  created() {
    this.refresh();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }
  .el-icon-delete + span {
    margin-left: 0px;
  }
}
</style>
